<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部卡片 -->
    <el-card shadow="never" body-style="padding: 20px;">
      <div class="ele-cell workplace-user-card">
        <div class="ele-cell-content ele-cell">
          <el-avatar :size="68" :src="loginUser.avatar"/>
          <div class="ele-cell-content">
            <h4 class="ele-elip">您好，{{ loginUser.realname }}，欢迎回来！</h4>
            <div class="ele-text-secondary ele-elip" style="margin-top: 8px;">
<!--              <i class="el-icon-heavy-rain"></i>-->
              <span>{{weatherinfo}}</span>
            </div>
          </div>
        </div>
        <div class="workplace-count-group">
          <div class="workplace-count-item">
            <div class="workplace-count-header">
              <el-tag size="small" class="ele-tag-round">
                <i class="el-icon-menu"></i>
              </el-tag>
              <span class="workplace-count-name">项目数</span>
            </div>
            <div class="workplace-count-num">0</div>
          </div>
          <div class="workplace-count-item">
            <div class="workplace-count-header">
              <el-tag type="warning" size="small" class="ele-tag-round">
                <i class="el-icon-finished"></i>
              </el-tag>
              <span class="workplace-count-name">待办项</span>
            </div>
            <div class="workplace-count-num">0 / 0</div>
          </div>
          <div class="workplace-count-item">
            <div class="workplace-count-header">
              <el-tag type="success" size="small" class="ele-tag-round">
                <i class="el-icon-bell"></i>
              </el-tag>
              <span class="workplace-count-name">消息</span>
            </div>
            <div class="workplace-count-num">0</div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 快捷方式 -->
    <el-row :gutter="15">
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/system/user" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-user"></i>-->
<!--            <div class="app-link-title">用户</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/app/dashboard/analysis" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-data-line" style="color: #95de64;"></i>-->
<!--            <div class="app-link-title">分析</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/list/card/project" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-shopping-cart-2" style="color: #ff9c6e;"></i>-->
<!--            <div class="app-link-title">商品</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/list/basic" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-tickets" style="color: #b37feb;"></i>-->
<!--            <div class="app-link-title">订单</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/list/advanced" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-bank-card" style="color: #ffd666;"></i>-->
<!--            <div class="app-link-title">票据</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/user/message" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-message" style="color: #5cdbd3;"></i>-->
<!--            <div class="app-link-title">消息</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/extension/more" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-discount" style="color: #ff85c0;"></i>-->
<!--            <div class="app-link-title">标签</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :md="3" :sm="6" :xs="12">-->
<!--        <el-card shadow="hover" body-style="padding: 0;">-->
<!--          <router-link to="/user/profile" class="app-link-block">-->
<!--            <i class="app-link-icon el-icon-s-operation" style="color: #ffc069;"></i>-->
<!--            <div class="app-link-title">配置</div>-->
<!--          </router-link>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
let me = null;
export default {
  name: 'DashboardWorkplace',
  data() {
    return {
      weatherinfo:'天气数据加载中……',
    };
  },
  computed: {
    // 当前登录用户信息
    loginUser() {
      return this.$store.state.user.user;
    }
  },
  created(){
    me = this;
    this.get_weatherinfo();
  },
  methods: {
    get_weatherinfo(){
      AMapLoader.load({
        "key": "6ec38c63d3f3b1b8286a63f062366c42",              // 申请好的Web端开发者Key，首次调用 load 时必填
        "plugins": ['AMap.Weather'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        var weather = new AMap.Weather();
        weather.getLive('昆明市', function(err, data) {
          if(err){
            me.weatherinfo='天气加载失败';
          }
          if(data){
            me.weatherinfo="今日"+data["city"]+data["weather"]+",气温"+data["temperature"]+"℃,湿度"+data["humidity"]+"%."
          }
        });
      }).catch(e => {
        me.weatherinfo='天气加载失败';
      })
    }
  }
}
</script>

<style scoped>
/* 顶部用户信息卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-count-group {
  white-space: nowrap;
}

.workplace-count-item {
  padding: 0 5px 0 25px;
  box-sizing: border-box;
  display: inline-block;
  text-align: right;
}

.workplace-count-name {
  padding-left: 8px;
}

.workplace-count-num {
  font-size: 24px;
  margin-top: 6px;
}

@media screen and (max-width: 992px) {
  .workplace-count-item {
    padding: 0 5px 0 10px;
  }
}

@media screen and (max-width: 768px) {
  .workplace-user-card,
  .workplace-count-group {
    display: block;
  }

  .workplace-count-group {
    margin-top: 15px;
    text-align: right;
  }
}

/* 快捷方式 */
.app-link-block {
  display: block;
  color: inherit;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.app-link-block .app-link-icon {
  color: #69c0ff;
  font-size: 30px;
  margin-top: 5px;
}

.app-link-block .app-link-title {
  margin-top: 8px;
}

/* 最新动态时间轴 */
.ele-timeline-act {
  padding-left: 50px;
}

.ele-timeline-act ::v-deep .el-timeline-item__timestamp {
  margin: 0;
  position: absolute;
  top: 3px;
  left: -45px;
}

.ele-timeline-act ::v-deep .el-timeline-item {
  padding-bottom: 19px;
}

.ele-timeline-act ::v-deep .el-timeline-item:last-child {
  padding-bottom: 0;
}

/* 表格 */
.workplace-table-card ::v-deep .el-table tbody > .el-table__row:last-child td {
  border-bottom: none;
}

.workplace-table-card ::v-deep .el-table:before {
  display: none;
}

.workplace-table-card .sort-handle {
  cursor: move;
  font-size: 18px;
  vertical-align: middle;
}

.workplace-table-card ::v-deep .el-table__row.sortable-chosen {
  background-color: hsla(0, 0%, 60%, .1);
}

.workplace-table-card ::v-deep .el-table__row.sortable-chosen td {
  background-color: transparent;
}

/* 本月目标 */
.workplace-goal-group {
  text-align: center;
  position: relative;
  padding: 48px 0;
}

.workplace-goal-group .workplace-goal-content {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}

.workplace-goal-group .workplace-goal-num {
  font-size: 40px;
  margin-top: 15px;
}

/* 小组成员 */
.user-list-item {
  padding: 13px 18px;
}

.user-list-item + .user-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, .15);
}

.user-list-item .ele-cell-desc {
  margin-top: 5px;
}
</style>
